<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图线路图</title>
    <!-- 引入jquery文件 -->
    <script src="../js/jquery-3.1.1.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.js"></script>
    <script src="../data/world.js"></script>
    <!-- 加载百度地图接口 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GXCSQBVhF8oZlzjfXCmDB5oLrG7ejbYF"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    myChart.showLoading();

    $.get('../data/flights.json', function(data) {

        myChart.hideLoading();

        function getAirportCoord(idx) {
            return [data.airports[idx][3], data.airports[idx][4]];
        }
        var routes = data.routes.map(function (airline) {
            return [
                getAirportCoord(airline[1]),
                getAirportCoord(airline[2])
            ];
        });

        myChart.setOption(option = {
            title: {
                text: 'World Flights',
                left: 'center',
                textStyle: {
                    color: '#eee'
                }
            },
            backgroundColor: '#003',
            tooltip: {
                formatter: function (param) {
                    var route = data.routes[param.dataIndex];
                    return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
                }
            },
            geo: {
                map: 'world',
                left: 0,
                right: 0,
                silent: true,
                itemStyle: {
                    normal: {
                        borderColor: '#003',
                        color: '#005'
                    }
                }
            },
            series: [{
                type: 'lines',
                coordinateSystem: 'geo',
                data: routes,
                large: true,
                largeThreshold: 100,
                lineStyle: {
                    normal: {
                        opacity: 0.05,
                        width: 0.5,
                        curveness: 0.3
                    }
                },
                // 设置混合模式为叠加
                blendMode: 'lighter'
            }]
        });
    });
</script>